<!-- @format -->
<script setup>
	import { ref } from 'vue'
	import { ElMessageBox } from 'element-plus'

	const dialogVisible = ref(false)

	const handleClose = (done) => {
		ElMessageBox.confirm('Are you sure to close this dialog?')
			.then(() => {
				done()
			})
			.catch(() => {
				// catch error
			})
	}
</script>
<template>
	<!-- 点击打开对话框的按钮 -->
	<el-button
		plain
		@click="dialogVisible = true">
		Click to open the Dialog
	</el-button>

	<!-- 
    el-dialog: 对话框组件
      v-model: 绑定布尔值，控制对话框是否可见
      title: 对话框的标题
      width: 对话框组件的宽度
      before-close: 对话框关闭前的回调函数， 每次点击 x 图标 或 
                    取消 的时候，都会触发关闭前的回调函数
  -->
	<el-dialog
		v-model="dialogVisible"
		title="Tips"
		width="500"
		:before-close="handleClose">
		<!-- 
      默认插槽：就是主体内容
    -->
		<template #default>
			<el-form>
				<el-form-item label="账号">
					<el-input />
				</el-form-item>
				<el-form-item label="密码">
					<el-input />
				</el-form-item>
			</el-form>
		</template>

		<!-- 
      具名插槽 footer: 自定义底部操作内容
    -->
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">Cancel</el-button>
				<el-button
					type="primary"
					@click="dialogVisible = false">
					Confirm
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>
